/**
* Description: 手卫生记录
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="hand-hygiene-record" v-show="infoFlag">
    <div class="content">
      <div class="state" style="width: 100%">
        <div class="title">手卫生记录</div>
        <div class="left">
          <el-button class="add-button" type="primary" @click="exportData"
          >导出记录
          </el-button>
        </div>
        <el-form :model="form" ref="formRef" label-position="top" inline class="rightForm">
          <el-form-item>
            <el-date-picker
              v-model="form.data.timeList"
              style="height: 36px"
              type="datetimerange"
              placeholder="选择日期时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="defaultTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.data.finishFlag" placeholder="请选择完成状态" clearable
                       style="width: 160px; height: 36px">
              <el-option
                v-for="item in $CONSTANTS.COMPLIANCE_STATUS_LIST"
                :key="item.ID"
                :label="item.TITLE"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.data.washHandsType" style="width: 160px; height: 36px"
                       placeholder="请选择手卫生类型" clearable>
              <el-option
                v-for="item in $CONSTANTS.CLEAN_TYPE_LIST"
                :key="item.ID"
                :label="item.TITLE"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <DeptCascader ref="deptCascaderRef" v-model="form.data.deptIdArrayList"/>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 160px; height: 36px"
              placeholder="请输入人员姓名"
              v-model="form.data.userName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-button" @click="getListData('search')">搜索</el-button>
            <el-button class="clear-button" @click="resetData">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示部分 -->
      <div class="tablePage">
        <Table
          ref="tableRef"
          :not-data-img="$CONSTANTS.NOT_DATA_IMG"
          :table-columns="tableTitle"
          :remote-api="getHandHygieneRecordListApi"
          :autoLoad="false"
          :pageNumberList="[10, 20, 50, 100]"
          ppageFieldName="page"
          pnumberFieldName="limit"
        >
          <template #index="scope">
            {{ scope.index + 1 }}
          </template>
          <template #finishFlag="scope">
            <span :style="{color: $CONSTANTS.COMPLIANCE_STATUS_MAP[scope.row.finishFlag].COLOR}"> {{
                $CONSTANTS.COMPLIANCE_STATUS_MAP[scope.row.finishFlag].TITLE
              }}</span>
          </template>
          <template #operate="scope">
            <el-button type="primary" class="edit-button" @click="checkDesc(scope.row)">
              详情
            </el-button>
          </template>
        </Table>
      </div>
    </div>
  </div>
  <div v-if="!infoFlag">
    <handHygieneRecordDetail ref="handHygieneRecordDetailRef" @change="detailsShow"/>
  </div>
</template>

<script setup lang="ts">
import {
  getHandHygieneRecordListApi,
  exportDataApi,
  type queryHandHygieneRecordListData,
  type handHygieneRecordDTO
} from "@/api/handHygieneRecord";
import {nextTick, onMounted, reactive, ref, toRaw} from "vue";
import type {ITableColumnItem} from "@/components/common/Table.vue"
import $CONSTANTS from '@/constants/globalConstants'
import {IBaseQueryDataListParams} from "@/api";
import {ElMessage} from "element-plus";
import {download} from "@/utils/download";


const formRef = ref();
const tableRef = ref();
const handHygieneRecordDetailRef = ref();
const infoFlag = ref<boolean>(true)
const deptCascaderRef = ref()

const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]

const form = reactive<IBaseQueryDataListParams<queryHandHygieneRecordListData>>({
  data: {
    startTime: undefined,
    endTime: undefined,
    userName: undefined,
    washHandsType: undefined,
    finishFlag: undefined,
    deptIdArrayList: [],
    timeList: []
  }
})

const tableTitle: Array<ITableColumnItem> = [
  {label: "序号", prop: "index", width: 80, template: true},
  {label: "记录编号", width: 180, prop: "washHandsRecordCode"},
  {label: "姓名", prop: "subUserName"},
  {label: "组织架构", prop: "hospitalDeptName"},
  {label: "手卫生类型", prop: "washHandsTypeStr"},
  {label: "所在层级", prop: "deviceLocation"},
  {label: "所在区域/点位", prop: "deviceRegionOrPosition"},
  {label: "完成状态", prop: "finishFlag", template: true},
  {label: "得分", prop: "washHandsScore"},
  {label: "手卫生时长", prop: "washHandsDurationStr"},
  {label: "结果描述", prop: "resultDesc"},
  {label: "结束时间", prop: "endTime", width: 180},
  {label: "操作", prop: "operate", template: true, fixed: "right", width: 150},
]

const getListData = async (type: string) => {
  if(form.data.timeList && form.data.timeList.length > 0){
    form.data.startTime = form.data.timeList?.[0].toString();
    form.data.endTime = form.data.timeList?.[1].toString();
  } else {
    form.data.startTime = undefined;
    form.data.endTime = undefined;
  }
  if (type === "search") {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}

const resetData = async () => {
  formRef.value.resetFields();
  form.data = {
    finishFlag: undefined,
    washHandsType: undefined,
    deptIdArrayList: [],
    userName: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  tableRef.value.refreshData(form);
  deptCascaderRef.value.resetData();
}


const exportData = async () => {
  let tableTotal = tableRef.value.getTotal();
  if (tableTotal == 0) {
    ElMessage.error("无手卫生记录可导出!");
    return;
  }
  let param: IBaseQueryDataListParams<queryHandHygieneRecordListData> = {
    data: form.data,
    limit: '',
    page: ''
  }
  let res = await exportDataApi(param);
  download(res.data, `手卫生记录`, "xlsx");
  ElMessage.success("导出成功");
}

const checkDesc = (row: handHygieneRecordDTO) => {
  detailsShow();

  nextTick(() => {
    handHygieneRecordDetailRef?.value?.init(toRaw(row))
  })
}

const detailsShow = () => {
  infoFlag.value = !infoFlag.value;
}

onMounted(() => {
  getListData('getData');
})

</script>

<style lang="scss" scoped>
.hand-hygiene-record {
  height: 100%;

}
</style>